<template>
  <div>
    <!-- 搜索 -->
    <div class="select">
      <el-row style="margin:10px" :gutter="2">
            <el-col span="4" >
              <el-input v-model="selectForm.name" placeholder="搜索">
                <template #prefix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template>
              </el-input>
            </el-col>
            <el-col span="1">
              <el-button type="primary" @click="seaInfo">搜索</el-button>
            </el-col>

            <el-col span="1">
              <!-- 添加 -->
              <addStudent></addStudent>
            </el-col>
      </el-row>
    </div>


    <el-table 
    :data="tableData" 
    style="width: 100%" 
    border="true" 
    max-height="400" 
    height="400"
    v-loading="loading"
    >

      <template #empty>
        <el-empty description="未查询到数据"></el-empty>
      </template>
        <el-table-column type="index" label="序号" width="150" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" align="center"></el-table-column>
        <el-table-column prop="" label="操作" align="center">

        <template #default="scope">
          <el-button-group>
            <el-button type="primary" @click="detailInfo(scope.row.id)" :disabled="!this.hasAuth('sys:student:detail')">详情</el-button>
            <el-button type="primary"  @click="updata(scope.row.id)" :disabled="!this.hasAuth('sys:student:detail') || !this.hasAuth('sys:student:update')">修改</el-button>
            <el-button type="primary" @click="delectInfo(scope.row.id)" :disabled="!this.hasAuth('sys:student:delete')">删除</el-button>
          </el-button-group>
        </template>
    </el-table-column>
    </el-table>
    <!-- 分页 -->
      <el-pagination
        v-model:currentPage="currentPage"
        :page-size="10"
        layout="prev, pager, next, jumper"
        v-model:total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
      </el-pagination>


<!-- 详情 -->
  <el-dialog v-model="dialogTableVisible">
      <el-descriptions
      title="Detail"
      direction="horizontal"
      :column="1"
      border>
          <el-descriptions-item label="姓名">{{detailData.name}}</el-descriptions-item>
          <el-descriptions-item label="年龄">{{detailData.age}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
<!-- 修改 -->
  <el-dialog v-model="dialogUpdata">
      <el-form
      ref="detailData"
      :model="detailData"
      label-width="100px"
      class="demo-ruleForm"
      >
        <el-form-item label="姓名">
          <el-input v-model="detailData.name" type="text"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="detailData.age" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('detailData')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    
  </div>
</template>

<script>
import axios from '../../utils/request'
import addStudent from './addStudent.vue';
import { ElMessage } from 'element-plus'
    export default {
      components: { addStudent},
      inject: ['reload'],           //页面刷新函数
      data() {
        return {
          tableData: [],        //显示数据
          currentPage: 1,        // 默认显示第一条
          totalCount:1,         // 总条数，根据接口获取数据长度(注意：这里不能为空)
          PageSize:10,             // 默认每页显示的条数（可修改）
          pageCount:1,
          dialogTableVisible: false,
          isOpen : false,
          detailData:{},
          total:1,
          dialogUpdata: false   // 控制新增编辑弹窗的显示与隐藏
          ,selectForm:{},
          loading:false
        }
      },
      methods: {
          handleCurrentChange(val) {
            axios.get('/students/student',{params:{pageNum:this.currentPage,pageSize:this.pageSize,uName:this.selectForm.name}})
            .then(reponse=>{
                console.log(reponse)
                this.tableData=reponse.data.data.pageInfo.list;
                this.totalCount=reponse.data.data.pageInfo.total;
                this.currentPage = val;
            }).catch(error=>{
              console.log(error);
            })
          },
          detailInfo(val){
            axios({
              method:'get',
              url:'/students/detail',
              params:{
                id:val
              }
            }).then(reponse=>{
                // console.log(reponse.data)
                this.detailData=reponse.data.data.studentInfo;
                // console.log(this.detailData)
                this.dialogTableVisible = true;
            }).catch(error=>{
              console.log(error);
            })
            
          },
          addStudent(){
            this.isOpen = true;
          },
          delectInfo(id){
            console.log("删除id "+id);
            axios({
              method:'get',
              url:'/students/delete',
              params:{
                id:id
              }
            }).then(reponse=>{
              console.log(reponse);
                ElMessage({
                  message: reponse.data.message,
                  type: 'success',
                })
                this.selectId = -1;
                this.reload()
            }).catch(error=>{
              console.log(error);
            })
          },
          updata(id){
            axios({
              method:'get',
              url:'/students/detail',
              params:{
                id:id
              }
            }).then(reponse=>{
               
                if(reponse.status === 200){
                  //  console.log(reponse)
                  this.detailData=reponse.data.data.studentInfo;
                  this.dialogUpdata = true;
                }
            });
          },
          submitForm(){
            axios.post("/students/upData",this.detailData)
            .then(res=>{
                ElMessage({
                  message: res.data.message,
                  type: 'success',
                });
                this.reload();
            })
          },
          seaInfo(){
           axios.get('/students/student',
            {params:
              {pageNum:this.pageNum,
              pageSize:this.pageSize,
              uName:this.selectForm.name}
            })
            .then(reponse=>{
                console.log(reponse.data.data.pageInfo.list)
                this.tableData=reponse.data.data.pageInfo.list;
                this.total=reponse.data.data.pageInfo.total;
                // console.log(this.total);
            });
          },
          hasAuth(perm){
            var authority = this.$store.state.menus.permList;
            return authority.indexOf(perm) > -1;
        }
       },
       mounted(){
         this.loading = true;
         axios.get('/students/student',
         {params:
          {pageNum:this.pageNum,
          pageSize:this.pageSize,
          uName:this.selectForm.name}
          })
            .then(reponse=>{
                // console.log(reponse)
                this.tableData=reponse.data.data.pageInfo.list;
                this.total=reponse.data.data.pageInfo.total;
                // console.log(this.total);
                this.loading = false;
            })
       }
    }
  </script>

<style scoped>
.select{
  display: flex;
  justify-content: left;
  width:40%;
}

</style>
